<template>
  <div>
    <el-card>
      <el-form class="info_form">
        <fieldset>
          <legend>选择专业</legend>
        <el-row :gutter="20" justify="center">
          <el-col :span="7">
            <div class="grid-content bg-purple">
              <el-form-item label="学院：" label-width="120px">
                <el-select v-model="mdInfo.departmentName" clearable placeholder="请选择学院">
                  <el-option
                      v-for="item in mdInfo"
                      :key="item.departmentId"
                      :value="item.departmentName">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="grid-content bg-purple">
              <el-input
                  placeholder="学院号"
                  v-model="mdInfo.departmentId"
                  :disabled="true">
              </el-input>
            </div>
          </el-col>
          <el-col :span="1"></el-col>
          <el-col :span="7">
            <div class="grid-content bg-purple">
              <el-form-item label="专业：" label-width="120px">
                <el-select v-model="mdInfo.majorName" clearable placeholder="请选择专业">
                  <el-option
                      v-for="item in mdInfo"
                      :key="item.id"
                      :value="item.majorName"
                      @change="majorIdChange">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="grid-content bg-purple">
              <el-input
                  placeholder="专业号"
                  v-model="majorId"
                  :disabled="true">
              </el-input>
            </div>
          </el-col>
        </el-row>
        </fieldset>
        <fieldset>
          <legend>查看分班数</legend>
        <el-row :gutter="20" justify="center">
          <el-col :span="10">
            <div class="grid-content bg-purple">
              <el-form-item label="专业每班平均人数：" label-width="300px">
                <el-input style="display: inline-block;width: 8rem;"
                          placeholder="输入每班人数"
                          v-model="numClass">
                </el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">
              <el-button type="primary">查看可分班级数</el-button>
            </div>
          </el-col>
          <el-col :span="3">
            <div class="grid-content bg-purple">
              <el-input style="width: 6rem"
                  placeholder="班级数"
                  v-model="classNum">
              </el-input>
            </div>
          </el-col>
        </el-row>
        </fieldset>
        <fieldset>
          <legend>新增班级</legend>
        <el-row :gutter="20" justify="center">
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="添加班级：" label-width="315px">
                <el-input style="width: 12rem" v-model="cgId">
                </el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="grid-content bg-purple">
              <el-button type="primary" @click="addCG">添加</el-button>
            </div>
          </el-col>
        </el-row>
        </fieldset>
        <el-button type="primary" class="dbCG">开始分配班级</el-button>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "cgDistribution",

  data() {
    return {
      byDepartment: [],
      byMajor: [],
      mdInfo: [{
        // id: '',
        // majorId: '',
        // majorName: '',
        // numberOfStudents: '',
        // departmentId: '',
        // departmentName: ''
      }
      ],
      value: '',
      departmentId: 0,
      majorId: 0,
      cgId: '',
      numClass: '',
      classNum: '',
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    async getInfo() {
      const {data:res} = await this.$http.get('selectMDInfo');
      // console.log(res.data)
      this.mdInfo = res.data;
    },
    majorIdChange() {
      var _this = this
      console.log(this.mdInfo.majorId)
      _this.majorId = this.mdInfo.majorId
    },
    addCG() {
    }
  }
}
</script>

<style lang="less" scoped>

.el-card {

}

.info_form {
  width: 100%;
  //background: chocolate;
  margin: auto;
}
fieldset {
  padding-top: 20px;
  border: 1px #1890ff solid;
  color: darkorange;
}
.el-row {
  //background: chartreuse;
}

.el-col {
  margin: auto;
  text-align: center;
}
.dbCG {
  margin-left: 280px;
  margin-top: 20px;
  width: 320px;
}
</style>
